<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>文本阴影调试工具</title>
<style> 
	#con{margin:20px;height:100px;border:2px solid;border-radius:10px;font-size:50px;line-height:100px;text-align:center;}
	#control{background:#DEEBF7;padding:20px;border-radius:10px;}
	section{height:40px;}
	select{display:inline;}
	input[type="range"]{vertical-align:middle;}
	#result{padding:10px;background:#F5F5D5;border-radius:10px;}
</style>
</head>
<body>
<div id="con"><span id="txt">text-shadow</span></div>
<div id="control">
	<section>
		水平位移：<input type="text" />
		<select>
			<option value="px">px</option>
			<option value="em">em</option>
		</select>
		<input type="range" min="0" max="15">
	</section>
	<section>
		垂直位移：<input type="text" />
		<select>
			<option value="px">px</option>
			<option value="em">em</option>
		</select>
		<input type="range" min="0" max="15">
	</section>
	<section>
		模糊距离：<input type="text" />
		<select>
			<option value="px">px</option>
			<option value="em">em</option>
		</select>
		<input type="range" min="0" max="15">
	</section>
	<section>
		阴影颜色：<input type="text" />
		<input type="color">
	</section>
	<section>
		 代码：<span id="result"></span>
	</section>	
	
</div>
<script>
var oDiv=document.querySelector("div");
var oInputRanges=document.querySelectorAll("input[type=range]");
var oInputTexts=document.querySelectorAll("input[type=text]");
var oSelects=document.querySelectorAll("select");
var oColor=document.querySelector("input[type=color]");
var result=document.getElementById("result");
setInterval(function(){
	oInputRanges.forEach(function(item,index){
		oInputTexts[index].value=item.value;
		oInputTexts[3].value=oColor.value;
	})
	oDiv.style.textShadow=oInputRanges[0].value+oSelects[0].value+" "+oInputRanges[1].value+oSelects[1].value+" "+oInputRanges[2].value+oSelects[2].value+" "+oColor.value;
	result.innerHTML="text-shadow:"+oInputRanges[0].value+oSelects[0].value+" "+oInputRanges[1].value+oSelects[1].value+" "+oInputRanges[2].value+oSelects[2].value+" "+oColor.value+";";
},10);
</script>
</body>
</html>
